<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :model="form" label-width="100px" class="flex">
                <el-form-item label="用户姓名：">
                    <el-input
                        v-model="name"
                        placeholder="请输入名称"
                        class="handle-input mr10"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="mohu()">搜索</el-button>
                    <!-- <el-button type="success" icon="el-icon-plus" @click="add()">新增</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
            <!-- <el-table-column prop="Collector_NAME" label="收集员姓名" width="150"></el-table-column> -->
            <el-table-column prop="NAME" label="姓名" width="150"></el-table-column>
            <el-table-column prop="ADDRESS" label="地址"></el-table-column>
            <el-table-column prop="TELEPHONE" label="电话"></el-table-column>
            <el-table-column prop="OrderTime" label="时间">
              <template scope="scope">
                  {{ $moment(scope.row.OrderTime).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
            <el-table-column prop="Remark" label="备注"></el-table-column>
            <!-- 
            <el-table-column prop="IDcard" label="身份证号"></el-table-column>
            <el-table-column prop="authorization" label="授权码"></el-table-column>
            <el-table-column prop="webchatId" label="绑定微信"></el-table-column>
            <el-table-column prop="first" label="首次登陆时间"></el-table-column> -->
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    <!-- <el-button
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)"
                        style="color:red"
                    >删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog v-dialogDrag title="编辑" :visible.sync="editVisible" width="50%">
            <el-form ref="form" :model="form" label-width="120px" class="flex">
                <el-form-item label="姓名：" class="wid50">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" class="wid50">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="负责区域名称：" class="wid50">
                    <el-input v-model="form.area"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" class="wid50">
                    <el-input v-model="form.IDcard"></el-input>
                </el-form-item>
                <el-form-item label="授权码：" class="wid50">
                    <el-input v-model="form.authorization"></el-input>
                </el-form-item>
                <el-form-item label="绑定微信：" class="wid50">
                    <el-input v-model="form.webchatId"></el-input>
                </el-form-item>
                <el-form-item label="首次登陆时间：" class="wid50">
                    <el-input v-model="form.first"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增弹出框 -->
        <el-dialog v-dialogDrag title="详情" :visible.sync="detailVisible" width="30%">
            <el-table :data="detailList">
            <el-table-column prop="TYPE_NAME" label="类型"></el-table-column>
            <el-table-column prop="RUBBISH_NAME" label="名称"></el-table-column>
            <el-table-column prop="Weight" label="重量"></el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog v-dialogDrag title="新增" :visible.sync="addVisible" width="50%">
            <el-form ref="addform" :model="addform" label-width="120px" class="flex">
                <el-form-item label="姓名：" class="wid50">
                    <el-input v-model="addform.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" class="wid50">
                    <el-input v-model="addform.phone"></el-input>
                </el-form-item>
                <el-form-item label="负责区域名称：" class="wid50">
                    <el-input v-model="addform.area"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" class="wid50">
                    <el-input v-model="addform.IDcard"></el-input>
                </el-form-item>
                <el-form-item label="授权码：" class="wid50">
                    <el-input v-model="addform.authorization"></el-input>
                </el-form-item>
                <el-form-item label="绑定微信：" class="wid50">
                    <el-input v-model="addform.webchatId"></el-input>
                </el-form-item>
                <el-form-item label="首次登陆时间：" class="wid50">
                    <el-input v-model="addform.first"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import '../../assets/css/common.css'

export default {
  data () {
    return {
      currentPage: 1, //初始页
      pagesize: 10,    //    每页的数据
      userList: [],
      address: '',
      name: '',
      addVisible: false,
      detailVisible: false,
      addform: '',
      // 原始数据
      originalData: [],
      tableData: [],
      detailList: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {
        name: ''
      },
      idx: -1,
      id: -1
    }
  },
  created () {
    this.getData();
  },
  methods: {
    getData () {
      this.$axios({
        url: this.$aurl+ '/GetOrdersApi?Collector_ID=',
        method: 'get'
      }).then(res => {
        if (res.status == 200) {
            this.originalData = res.data
            this.mohu()
        //   console.log(res.data)
        }
      })
      
    },
    //详情
    handleDetail (index, row) {
      
      this.detailList = row.order_Details
      console.log(this.detailList)
      this.detailVisible = true
    },
    //新增
    add () {
      this.addVisible = true;
    },
    //删除
    handleDelete (index, row) {
      this.$confirm('确认删除？', '提示', {
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
      })
    },
    // 模糊查询
    mohu () {
      this.tableData = this.originalData
      // if (this.name !== '全部') this.warningData = this.warningData.filter(item => this.warningTypeValue === item.TYPE)
      if (this.name !== '') this.tableData = this.tableData.filter(item => item.NAME.includes(this.name))
      
      // var search = this.name;
      // console.log(search)
      // var newdate = [];
      // if (search) {
      //   if (search)
      //     this.tableData.filter(item => {
      //       if (item.NAME.indexOf(search) != -1) {
      //         newdate.push(item)
      //       }
      //     })
      // } else if (search == '') {
      //   console.log(this.tableData)
      //   this.tableData = newdate
      // }
      // this.tableData = newdate
    },
    // 编辑操作
    handleEdit (index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit () {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pagesize = size;
    }
  }
}
</script>
<style scoped>
</style>